<template>
	<!-- 忘记密码 -->
	<view class="findPass">
		<view class="contentBox">
			<view class="r-content">
				<view class="item flex-bc">
					<view class="inputer flex">
						<image src="../../../static/common/phone.png"></image>
						<input class="uni-input" type="number" placeholder="请输入手机号" v-model="mobile"/>
					</view>
				</view>
				<view class="item flex-bc">
					<view class="inputer flex">
						<image src="../../../static/common/verification-code.png"></image>
						<input class="uni-input" type="number" placeholder="请输入验证码" v-model="verCode"/>
					</view>
					<view class="ver-code" @click="fnGetVerCode()">
						<text>{{codeText}}</text>
					</view>
				</view>
				<view class="item flex-bc">
					<view class="inputer flex">
						<image src="../../../static/common/password.png"></image>
						<input class="uni-input" :password="showPassword" type="text" placeholder="请输入密码" v-model="pass"/>
					</view>
					<view class="ifsee" v-if="pass" @click="fnSeePass(1)">
						<image :src="seeSrc.see" v-if="seePass"></image>
						<image :src="seeSrc.nosee" v-else></image>
					</view>
				</view>
				<view class="item flex-bc">
					<view class="inputer flex">
						<image src="../../../static/common/password.png"></image>
						<input class="uni-input" :password="showRepassword" type="text" placeholder="请再次输入密码" v-model="repass"/>
					</view>
					<view class="ifsee" v-if="repass" @click="fnSeePass(2)">
						<image :src="seeSrc.see" v-if="seeRepass"></image>
						<image :src="seeSrc.nosee" v-else></image>
					</view>
				</view>
				<view class="item btn flex-c" @click="fnResetPass()">
					<text>重置密码</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const util = require('../../../common/util.js')
	export default {
		data() {
			return {
				codeText: '获取验证码',
				mobile: '',
				verCode: '',
				pass: '',
				repass: '',
				seePass: false,
				seeRepass: false,
				showPassword: true,
				showRepassword: true,
				flag: true,
				seeSrc: {
					see: '../../../static/common/see.png',
					nosee: '../../../static/common/not-see.png'
				}
			};
		},
		methods: {
			fnGoBack() {
				uni.navigateBack()
			},
			fnToLogin(){
				uni.navigateTo({
					url: "../login/login"
				})
			},
			fnToPrivacy(index){
				var url = '../userAgreement/userAgreement'
				if(index == 2){
					url = '../privacy/privacy'
				}
				uni.navigateTo({
					url:url
				})
			},
			// 点击查看密码
			fnSeePass(index) {
				if (index == 1) { //首次密码
					if (this.seePass) { //该显示了
						this.showPassword = true
					} else {
						console.log('显示')
						this.showPassword = false
					}
					this.seePass = !this.seePass
				} else { //再次密码
					if (this.seeRepass) { //该显示了
						this.showRepassword = true
					} else {
						this.showRepassword = false
					}
					this.seeRepass = !this.seeRepass
				}
			},
			// 获取验证码
			fnGetVerCode() {
				if (util.isPhoneNo(this.mobile)) { //验证是手机号 获取验证码
					if (!this.flag) return
					var count = 60
					this.codeText = count+'s'
					var that = this
					var timer = setInterval(function() {
						that.flag = false
						count--
						that.codeText = count+'s'
						if (count <= 0) {
							clearInterval(timer)
							that.codeText = '获取验证码'
							that.flag = true
						}
					}, 1000)
					this.fnGetFindPassVerCode(this.mobile)
				} else {
					return
				}
			},
			// 获取修改密码验证码接口
			fnGetFindPassVerCode(mobile) {
				var that = this
				that.request({
					url: '/czb/User/sendSms',
					method: 'POST',
					data: {
						'type': 3,
						'mobile': mobile,
						'store_id': 1
					},
				}).then((ret) => {
					console.log(ret);
					if(ret.code == 1){
						uni.showToast({
							title: ret.message+'去登录',
							icon: 'none'
						})
						setTimeout(function(){
							uni.navigateTo({
								url:'../login/login'
							})
						},1500)
					}
				})
			},
			fnResetPass(){
				if (!util.isPhoneNo(this.mobile)) return uni.showToast({
					title: '请输入正确的手机号',
					icon: 'none'
				})
				if (!this.verCode) return uni.showToast({
					title: '请输入验证码',
					icon: 'none'
				})
				if (!this.pass) return uni.showToast({
					title: '请输入密码',
					icon: 'none'
				})
				if (!this.repass || this.pass != this.repass) return uni.showToast({
					title: '请再次输入相同的密码',
					icon: 'none'
				})
				
				// 验证完毕调用重置密码接口
				var that = this
				that.request({
					url: '/czb/User/resetPassword',
					method: 'POST',
					data: {
						'password': that.pass,
						'mobile': that.mobile,
						'code': that.verCode,
						'confirm_password': that.repass,
						'store_id': 1
					},
				}).then((ret) => {
					console.log(ret);
					if(ret.code == 0){
						uni.showToast({
							title: ret.message+'去登录',
							icon: 'success'
						})
						setTimeout(function(){
							uni.navigateTo({
								url:'../login/login'
							})
						},1500)
					}else{
						uni.showToast({
							title: ret.message,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.findPass{
		padding-top: 30rpx;
	}

	.contentBox {
		width: 638rpx;
		box-shadow: 0px 6rpx 40rpx 0px rgba(0, 0, 0, 0.1);
		border-radius: 30px;
		background: #FFFFFF;
		border-radius: 30rpx;
		margin: 0rpx auto 20rpx;
		color: #F2342D;
		font-size: 32rpx;
		padding: 62rpx 0;
		.r-content {
			width: 550rpx;
			margin: 0 auto;

			.item {
				margin-bottom: 40rpx;
				height: 100rpx;
				background: #F7F8F9;
				border-radius: 50rpx;
				width: 100%;
				padding: 0 50rpx;
				box-sizing: border-box;

				.inputer {
					align-items: center;

					image {
						width: 46rpx;
						height: 46rpx;
						margin-right: 10rpx;
						display: block;
					}

					.uni-input {
						font-size: 28rpx !important;
						color: #333 !important;
					}

				}

				.ver-code {
					padding: 20rpx 0;
					font-size: 24rpx;
					color: #F54137;

					text {
						white-space: nowrap;
					}
				}

				.ifsee {
					image {
						width: 32rpx;
						height: 24rpx;
					}
				}
			}

			.btn {
				background: linear-gradient(270deg, #F22F29, #FC6655);
				margin: 60rpx 0 10rpx;
				color: #fff;
				font-size: 34rpx;
			}
		}
	}
</style>
